⚡ 30 秒速记

• 开发阶段按需处理模块，缩短启动等待
• 浏览器模块加载、依赖优化和热更新分工协作
• 开发快不等于生产无需构建
• 底层工具随版本演进，别把 Rollup、esbuild 写成永久前提
• 排查开发与生产差异，要对齐解析、环境变量和插件行为

Vite 的关键体验是让开发服务器尽快可用，并按实际访问需要处理代码。 浏览器负责加载模块，服务器转换请求到的源码，依赖优化降低第三方包带来的加载开销；文件变化再通过热更新送到页面。生产环境仍要构建、压缩和组织资源。它的底层工具经历过演进，所以讨论性能或插件兼容时，要先确认项目版本，再谈具体由哪个引擎负责。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

Vite 的定义

Vite 是面向现代浏览器的一个更轻、更快的 Web 应用开发工具，核心基于 ECMAScript 标准原生模块系统（ES Modules）实现。

表象功能上看，Vite 可以取代基于 Webpack 的 vue-cli 或者 cra 的集成式开发工具，提供全新的一种开发体验。

具体细节往下看。

Vite 的由来

在此之前，如果我们所开发的应用比较复杂（代码量偏大），使用 Webpack 的开发过程相对没有那么「丝滑」，具体表现为以下两点：

• Webpack Dev Server 冷启动时间会比较长，稍大一点的项目启动开发服务都需要等待 10 - 20 秒；
• Webpack HMR 热更新的反应速度比较慢，修改完代码需要等待编译器全部编译完成才能开始同步到浏览器；

快速上手

这里我们话不多说，先上手体验一下 Vite，然后再来分析其内部的思路和想法。

Vite 官方目前提供了一个比较简单的脚手架：create-vite-app，可以使用这个脚手架快速创建一个使用 Vite 构建的 Vue.js 应用

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

如果使用 Yarn：

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

P.S. npm init 或者 yarn create 是这两个包管理工具提供的新功能， 其内部就是自动去安装一个 create-<xxx> 的模块（临时），然后自动执行这个模块中的 bin。 例如: yarn create react-app my-react-app 就相当于先 yarn global add create-react-app，然后自动执行 create-react-app my-react-app